import { HeartOutlined, ShoppingCartOutlined } from "@ant-design/icons";
import axios from "axios";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";

interface Ilist {
    id: number,
    cover: string,
    avatar:string,
    nickname:string,
    pulses:number


}
function HotImg() {
    const navigate=useNavigate()
    function ToSearch() {
        navigate({ pathname: '/search' });
    }
    
    // const [display, setDisplay] = useState<string>("none")
    let [imglist, setimglist] = useState<Ilist[]>([
        { id: 1,avatar:"",nickname:"",pulses:20, cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 2,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0407/606d093b83665.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 3,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0504/6090bddc947f3.jpeg?imageView2/2/w/632/h/389" },
        { id: 4,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e7207c53b.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 5,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 6,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 7,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 1,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 2, avatar:"",nickname:"",pulses:20, cover: "http://gaga-images.paixin.com/photos2/2021/0407/606d093b83665.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 3,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0504/6090bddc947f3.jpeg?imageView2/2/w/632/h/389" },
        { id: 4,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e7207c53b.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 5,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 6,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 7,avatar:"",nickname:"",pulses:20,  cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 8, avatar:"",nickname:"",pulses:20, cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e71e327fe.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 8,avatar:"",nickname:"",pulses:20, cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e71e327fe.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
    ]);
    useEffect(() => {
        axios.get('http://127.0.0.1:81/getdynamics1').then(function (res) {
            console.log(res.data);
            setimglist(res.data.results)
        })
            .catch(function (error) {
                console.log(error);
            });

    }, [])

    function toDetailMain(id:number) {
        navigate({ pathname: '/DetailMain' },{state:id});
    }
    return (
        <div className="ContainerTag">
            <h1>热门图片</h1>
            <div className="hotImg">
                {
                    imglist.map((item, index) => {
                        return (
                            <div key={index} className="list1">
                                <img src={item.cover} alt="" onClick={toDetailMain.bind(null, item.id)}/>
                                <div className="imgItem">
                                    <div className="imgTop" >
                                        <HeartOutlined style={{ height: "40px", width: '40px', background: "rgba(56,37,24,0.8)", lineHeight: "50px", marginRight: "5px" }} />
                                        <ShoppingCartOutlined style={{ height: "40px", width: '40px', background: "rgba(56,37,24,0.8)", lineHeight: "50px" }} />
                                    </div>
                                    <div className="imgbottom">
                                        <div className="img1">
                                            <img src={item.avatar} alt="" />
                                            <span>{item.nickname}</span>
                                        </div>
                                        <div className="it1">{item.pulses}</div>
                                    </div>
                                </div>
                            </div>)
                    })
                }
            </div>
            <div className="activeBtn" onClick={ToSearch}>更多图片</div>
        </div>
    );
}
export default HotImg;